<template>
  <div class="tabContent">
    <div class="topTool">
      <el-input
        v-model="searchInput"
        style="width:300px; margin:0 5px 0 0;"
        size="small"
        placeholder="输入要搜索的标题、发布信息"
        clearable
      ></el-input>
      <el-select v-model="yearList" size="small" placeholder="请选择" @change="changeYear">
        <el-option
          v-for="item in yearOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button size="small" type="primary" @click="outbox_search()">搜索</el-button>
    </div>
    <div class="listMain" :style="{height:scHeight}">
      <ul v-if="pagination.dataList.length != 0">
        <li
          v-for="(n,index) in pagination.dataList"
          :key="index"
          @click="intdetails(n.noticeUserId,useYear)"
        >
          <div class="listBox">
            <h3 v-if="index==0" @click.stop>
              <span style="padding: 0 10px;">通知标题</span>
            </h3>
            <h4 class="overflow-ellipsis3">{{n.title}}</h4>
          </div>
          <div class="listBox">
            <h3 v-if="index==0"  @click.stop>
              <span>通知标签</span>
            </h3>
            <dl>
              <dt>类型：</dt>
              <dd v-if="n.typeName">{{n.typeName}}</dd>
              <dd v-else>无</dd>
            </dl>
            <dl>
              <dt>重要性：</dt>
              <dd>
                <span class="importance" style="color:#01a0d2;" v-if="n.noticeImportance==1">一般</span>
                <span class="importance" style="color:#ff9001;" v-else-if="n.noticeImportance==2">重要</span>
                <span class="importance" style="color:#F30;" v-else>
                  紧急
                  <i class="icon iconfont iconyujing"></i>
                </span>
              </dd>
            </dl>
          </div>
          <div class="listBox">
            <h3 v-if="index==0"  @click.stop>
              <span>发布信息</span>
            </h3>
            <dl>
              <dt>发布部门：</dt>
              <dd>{{n.pubDeptName}}</dd>
            </dl>
            <dl>
              <dt>发布人：</dt>
              <dd>{{n.pubUserName}}</dd>
            </dl>
            <dl>
              <dt>发布时间：</dt>
              <dd style="font-size: 13px;">{{n.pubTime}}</dd>
            </dl>
          </div>
          <div class="listBox">
            <h3 v-if="index==0"  @click.stop>
              <span>状态</span>
            </h3>
            <span class="readState" v-if="n.read">已读</span>
            <span class="readState unRead" v-else>未读</span>
          </div>
          <div class="listBox">
            <h3 v-if="index==0"  @click.stop>
              <span>操作</span>
            </h3>
            <div class="bts">
              <el-button size="small" type="danger" @click.stop="outbox_delete(n.noticeUserId)">删除</el-button>
            </div>
          </div>
          <div class="clear"></div>
        </li>
      </ul>
      <div
        v-else-if="useInput"
        style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
        :style="{marginTop:top}"
      >暂未搜索到您想要的内容~</div>
      <div
        v-else-if="isRead == '1'"
        style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
        :style="{marginTop:top}"
      >暂时没有已读的通知哦~</div>
      <div
        v-else-if="isRead == '0'"
        style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
        :style="{marginTop:top}"
      >您的办事效率很高哦，暂时没有未读的通知~</div>
      <div
        v-else
        style="text-align: center;color:#9c9c9c;letter-spacing:1.5px;font-size:16px;"
        :style="{marginTop:top}"
      >暂未收到通知~</div>
    </div>
    <div class="paging">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[10, 20, 30, 50, 100, 200, 500]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "inbox",
  data() {
    return {
      top: "",
      searchInput: "",
      useInput: "",
      yearList: "",
      useYear: "",
      yearOptions: [],
      pagination: {
        total: 0,
        page: 1,
        size: 10,
        dataList: []
      }
    };
  },
  props: {
    scHeight: String,
    isRead: Number
  },
  mounted() {},
  watch: {
    $route: function(n, o) {
      if (n != o) {
        this.load_list();
      }
    },
    scHeight: function(n) {
      let h = n.replace(/^[^\d]*(\d+)[^\d]*$/, "$1");
      this.top = h / 2 + "px";
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pagination.size = size;
      this.load_list();
    },
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.load_list();
    },
    outbox_delete(id) {
      this.hw_confirm("您确定要删除吗？", () => {
        let url = "/receive/notice/manage/delete";
        let param = {
          noticeUserId: id,
          year: this.useYear
        };
        this.$ajax
          .post(url, param)
          .then(out => {
            this.hw_result(out.data, true, this, () => {
              this.hw_success("删除成功");
              this.load_list();
            });
          })
          .catch(error => {});
      });
      return false;
    },
    Initialization: function() {
      let me = this;
      let daten = new Date();
      let year = daten.getFullYear();
      me.yearList = year.toString();
      me.useYear = year.toString();
      var arr = [];
      // 起于2019年，止于当前年
      for (let i = 2019; i <= year; i++) {
        arr.push({ value: i, label: i });
      }
      this.yearOptions = arr;
      this.load_list();
    },
    changeYear(val) {},
    outbox_search() {
      this.pagination.page = 1;
      this.useYear = this.yearList;
      this.useInput = this.searchInput;
      this.load_list();
    },
    load_list() {
      let url = "/receive/notice/manage/query";
      let param = {
        page: this.pagination.page,
        size: this.pagination.size
      };
      if (this.useInput) {
        param.queryParam = this.useInput;
      }
      if (this.useYear) {
        param.year = this.useYear;
      }
      if (this.isRead == 0) {
        param.isRead = 0;
      }
      if (this.isRead == 1) {
        param.isRead = 1;
      }

      this.$ajax
        .post(url, param)
        .then(out => {
          this.hw_result(out.data, true, this, () => {
            this.pagination.dataList = [];
            this.pagination.dataList = out.data.result.list;
            this.pagination.page = out.data.result.page;
            this.pagination.total = out.data.result.total;
          });
        })
        .catch(error => {
          this.pagination.dataList = [];
        });
    },
    intdetails(id, year) {
      localStorage.setItem("boxId", id);
      this.$router.push({
        name: "inboxdetails",
        params: { year: year, type: "receive" }
      });
    }
  }
};
</script>
<style>
</style>
